<template>
  <a-modal v-model:visible="visible" width="50%" :title="title" unmount-on-close @before-ok="onOk">
    <a-form ref="formRef" :model="form" size="medium" auto-label-width>
      <a-form-item label="父级菜单" field="parent_id">
        <a-tree-select
          allow-clear
          v-model="form.parent_id"
          :data="tableDataSource"
          placeholder="不选择父级菜单默认为顶级菜单"
        ></a-tree-select>
      </a-form-item>
      <div class="flex">
        <a-form-item label="菜单名称" field="extend.title">
          <a-input placeholder="请输入菜单名称" v-model="form.extend.title" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="路由名称" field="name">
          <a-input placeholder="请输入前端路由" v-model="form.name" allow-clear></a-input>
        </a-form-item>
      </div>
      <div class="flex">
        <a-form-item label="路由路径" field="extend.path">
          <a-input placeholder="请输入路由路径" v-model="form.extend.path" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="组件路径" field="extend.component">
          <a-input placeholder="请输入组件路径" v-model="form.extend.component" allow-clear></a-input>
        </a-form-item>
      </div>
      <div class="flex">
        <a-form-item label="重定向路由" field="extend.redirect">
          <a-input placeholder="请输入重定向路由" v-model="form.extend.redirect" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="高亮路由" field="extend.activeMenu">
          <a-input placeholder="请输入左侧需要高亮路由的路径" v-model="form.extend.activeMenu" allow-clear></a-input>
        </a-form-item>
      </div>
      <a-form-item label="项目" field="guard_name" :rules="[{ required: true, message: '请输入项目' }]">
        <a-input disabled placeholder="请输入项目" v-model="form.guard_name" allow-clear></a-input>
      </a-form-item>
      <a-form-item label="权限分配" field="permission_list">
        <a-cascader
          :options="guardNameForPermissionsList"
          :field-names="{ value: 'name', label: 'display_name', children: 'permission' }"
          placeholder="请选择页面权限"
          v-model="form.permission_list"
          multiple
        />
      </a-form-item>
      <div class="flex">
        <a-form-item label="图标" field="icon">
          <a-space>
            <a-input v-model="form.icon" placeholder="点击右侧图标选择"></a-input>
            <GiIconSelector v-model="form.icon" enableCopy></GiIconSelector>
          </a-space>
        </a-form-item>
        <a-form-item label="SVG图标" field="svgIcon">
          <a-space>
            <a-input v-model="form.extend.svgIcon" placeholder="请输入SVG图标"></a-input>
          </a-space>
        </a-form-item>
      </div>
      <div class="flex">
        <a-form-item label="隐藏路由" field="hidden">
          <a-switch v-model="form.extend.hidden" />
        </a-form-item>
        <a-form-item label="固定路由" field="affix">
          <a-switch v-model="form.extend.affix" />
        </a-form-item>
        <a-form-item label="加粗展示" field="bold">
          <a-switch v-model="form.extend.bold" />
        </a-form-item>
        <a-form-item label="缓存路由" field="keepAlive">
          <a-switch v-model="form.extend.keepAlive" />
        </a-form-item>
      </div>
      <a-form-item
        label="排序"
        field="sequence"
        :rules="[{ required: true, message: '请输入排序' }]"
        :validate-trigger="['change', 'input', 'blur', 'focus']"
      >
        <a-input-number v-model="form.sequence" :min="1" placeholder="请输入排序"></a-input-number>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { menuAdd, menuEdit, guardNameForPermissions } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { deepClone } from '@/utils/common'
const emit = defineEmits(['getTableData'])

const props = defineProps(['menuData'])

const tableDataSource = ref([])
watch(
  () => props.menuData,
  (value) => {
    tableDataSource.value = JSON.parse(JSON.stringify(value))
    recursionMenu(tableDataSource.value)
  },
  { deep: true }
)

const recursionMenu = (menu) => {
  menu.forEach((item, index) => {
    menu[index] = {
      key: item.id,
      title: item.extend.title,
      children: item.children && item.children.length ? item.children : []
    }
    if (menu[index].children.length) {
      recursionMenu(menu[index].children)
    }
  })
}

const title = computed(() => (form.id ? '编辑菜单' : '新增菜单'))
const visible = ref(false)
const formRef = ref()
const guardNameForPermissionsList = ref([])
const form = reactive({
  id: undefined,
  name: '',
  guard_name: 'admin',
  parent_id: 0,
  icon: '',
  sequence: 1,
  permission_list: [],
  extend: {
    title: '',
    path: '',
    redirect: '',
    component: '',
    activeMenu: '',
    svgIcon: '',
    hidden: false,
    affix: false,
    keepAlive: true,
    bold: false
  }
})

// 获取所有权限组
const getGuardNameForPermissions = async () => {
  const res = await guardNameForPermissions()
  guardNameForPermissionsList.value = res.data
}
getGuardNameForPermissions()

const addOrEdit = (menuItem) => {
  form.id = menuItem?.id ?? undefined
  form.name = menuItem?.name ?? undefined
  form.guard_name = menuItem?.guard_name ?? 'admin'
  form.parent_id = menuItem?.parent_id ?? undefined
  form.icon = menuItem?.icon ?? undefined
  form.sequence = menuItem?.sequence ?? 1
  form.extend.title = menuItem?.extend?.title ?? undefined
  form.extend.path = menuItem?.extend?.path ?? undefined
  form.extend.redirect = menuItem?.extend?.redirect ?? undefined
  form.extend.component = menuItem?.extend?.component ?? undefined
  form.extend.activeMenu = menuItem?.extend?.activeMenu ?? undefined
  form.extend.svgIcon = menuItem?.extend?.svgIcon ?? undefined
  form.extend.hidden = menuItem?.extend?.hidden ?? false
  form.extend.affix = menuItem?.extend?.affix ?? false
  form.extend.keepAlive = menuItem?.extend?.keepAlive ?? true
  form.extend.bold = menuItem?.extend?.bold ?? false
  form.permission_list = menuItem?.permission_list ?? []
  visible.value = true
}

const onOk = async () => {
  const formO = deepClone(form)
  if (!formO.parent_id) formO.parent_id = 0
  formO.uri = formO.extend.path
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  const api = formO.id ? menuEdit : menuAdd
  await api(formO)
  Message.success('操作成功')
  emit('getTableData')
  return true
}

defineExpose({ addOrEdit })
</script>
